<template>
    <RiskTableP
        :ref="'risk-table-' + type"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :column="tableColumns"
        v-loading="tableLoading"
        @page-change="getTableData"
        @checkRowKeys-change="checkRowKeysChange"
        style="height: 300px"
        :checkMethod="() => $attrs.dialogType != 'look'"
    >
        <!-- TODO 禁用项不勾选问题 -->
    </RiskTableP>
    <!--  :paging="paging" 是否会数据量大，需要分页？TODO -->
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { TableConfigVO } from '@/common/vo';
import { Component, Prop, Vue } from 'vue-property-decorator';
import API from '../api/process-handling';
@Component({ name: 'NotificationSettingTable', components: { RiskTableP } })
export default class NotificationSettingTable extends Vue {
    @Prop() type: string;
    @Prop() infoConfig: any;
    checkRowKeys: any = [];
    tableLoading: boolean = false;
    tableConfig: TableConfigVO;
    tableColumns: any = [];
    tableData: any[] = [];

    tableConfigUser: TableConfigVO = {
        rowKey: 'userCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableColumnsUser = [
        { type: 'checkbox', selectedAll: false, width: 60, align: 'center' },
        {
            title: '用户编号',
            field: 'userCode',
        },
        {
            title: '用户名称',
            field: 'userNickName',
        },
    ];

    tableConfigRole: TableConfigVO = {
        rowKey: 'roleCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableColumnsRole = [
        { type: 'checkbox', selectedAll: false, width: 60, align: 'center' },
        {
            title: '角色编号',
            field: 'roleCode',
        },
        {
            title: '角色名称',
            field: 'roleName',
        },
    ];
    created() {
        if (this.type == 'user') {
            this.tableConfig = this.tableConfigUser;
            this.tableColumns = this.tableColumnsUser;
        } else if (this.type == 'role') {
            this.tableConfig = this.tableConfigRole;
            this.tableColumns = this.tableColumnsRole;
        }
    }

    async mounted() {
        await this.getTableData();
        this.$nextTick(() => {
            const field = this.tableColumns[1].field;
            let codes = this.infoConfig[this.type + 'Codes'] || [];

            let newCodes = [];
            codes.forEach(e => {
                if (this.tableData.find(i => i[this.type + 'Code'] === e)) {
                    newCodes.push(e);
                }
            });
            const data = newCodes.map(key => {
                let obj = {};
                obj[field] = key;
                return obj;
            });

            console.log(data, this.$refs['risk-table-' + this.type], 'data');
            const table: any = this.$refs['risk-table-' + this.type] as any;
            const xTable = table.$refs['xTable'] as any;
            xTable.clearCheckboxRow();
            xTable.setCheckboxRow(data, true);
            table.checkRowKeys = newCodes;
        });
    }

    /**
     * 勾选值变化时
     */
    checkRowKeysChange(keys: any) {
        console.log(keys, 'keys');
        this.checkRowKeys = keys;
        const field1 = this.tableColumns[1].field;
        const field2 = this.tableColumns[2].field;

        // let values = [];
        // // 不存在得keys是否移除  TODO
        // keys.map(key => {
        //     const obj = this.tableData.find(item => item[field1] == key) || {};
        //     const value = obj[field2];
        //     value && values.push(value);
        // });
        const values = keys.map(key => {
            const obj = this.tableData.find(item => item[field1] == key) || {};
            return obj[field2];
        });
        this.$emit('checkRowKeys-change', { keys, values });
    }

    /**
     * 表格数据
     */
    getTableData() {
        this.tableLoading = true;
        const handleWay = this.type == 'user' ? API.handleUserList : API.handleRoleList;
        // 是否需要处理成分页
        return new Promise((resolve, reject) => {
            handleWay()
                .then((res: any) => {
                    this.tableData = res || [];
                    resolve(res);
                })
                .catch(err => {
                    console.log(err, 'handleWay');
                    reject(err);
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        });
    }
}
</script>
<style lang="scss" scoped></style>
